import React, { Component } from 'react';
import Avatar from 'material-ui/Avatar';
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import { grey500 } from 'material-ui/styles/colors';
import { Card, CardMedia, CardActions, CardHeader, CardText, CardTitle } from 'material-ui/Card';

import { Link } from 'react-router';

import CONFIG from '../../config';
import { moment } from '../Utils/Helper';
import {parseJSON,getMethod,postJsonMethod} from '../../redux/Helper';

import { Styles } from '../../styles';

export default class ActivityCard extends Component {

  /**
   * 申请加入活动
   */
  // is_apply_activity,is_join_activity
  add = () => {
    const {index, item} = this.props;
    this.props.changeInActivity(index, 1);

    let url = `${CONFIG.apiHost}/api/activity/apply/${item.id}?token=${this.props.token}`;

    let data = {user_id: this.props.userId};

    fetch(url, postJsonMethod(data));
  };

  /**
   * 取消申请
   */
  cancel = () => {
    const {index, item} = this.props;
    this.props.changeInActivity(index, 0);

    let url = `${CONFIG.apiHost}/api/activity/apply/cancel/${item.id}?token=${this.props.token}`;

    let data = {user_id: this.props.userId};

    fetch(url, postJsonMethod(data));
  };

  /**
   * 活动是否过期，未过期为true|false
   */
  _compareStartTime(startTime) {
    if (new Date() > new Date(startTime)) {
      return true;
    }

    return false;
  }

  render() {
    const { find, item, color500} = this.props;

    let findHeader = (
      <div>
        <CardMedia 
          style={{cursor: 'pointer'}}
          onClick={this.props.pushTo.bind(this, '/activity/show/' + item.id)}
        >
          <img src={item.cover} />
        </CardMedia>

        <CardHeader
          style={{
            marginTop: -26,
            padding: 0,
            paddingLeft: 16,
            paddingRight: 16,
          }}
          textStyle={{marginTop: 26}}
          avatar={<Avatar 
            style={{
              borderWidth: 2,
              borderStyle: 'solid',
              borderColor: '#fff',
              cursor: 'pointer'
            }} 
            src={item.user_img}
            size={45} 
            onClick={this.props.pushTo.bind(this, '/user/' + item.user_id)}
          />}
        />
      </div>
    );

    let header = (
      <div>
        <CardHeader
          title={
            <span>
              <b><Link to={`user/${item.user_id}`}>{item.user_name}</Link></b> > {item.theme}
            </span>
          }
          titleStyle={{height: 40, lineHeight: 2.6}}
          avatar={item.user_img}
        />
        <CardMedia
          overlay={this._compareStartTime(item.start_time) ? 
            <CardTitle subtitle="活动已过期" /> : <div></div>
          }
          overlayContentStyle={{padding: 0}}
        >
          <img src={item.cover} />
        </CardMedia>
      </div>
    );

    let action = (
      <CardActions style={{display: 'flex', justifyContent: 'space-between'}}>
        {this.props.userId == item.user_id || item.is_join_activity == 1 ? '' :
          <IconButton
            iconClassName="icon-exposure_plus_1"
            iconStyle={{color: item.is_apply_activity == 0 ? grey500 : color500}}
            tooltip={item.is_apply_activity == 0 ? '申请加入' : '取消加入'}
            tooltipPosition="top-right"
            onTouchTap={item.is_apply_activity == 0 ? this.add : this.cancel}
            disabled={this._compareStartTime(item.start_time) ? true : false}
          />
        }

        <div style={{marginLeft: 8}}>
          <span style={styles.span}>
          申请: {item.activity_apply_count}
          </span>
        </div>

        <div style={{marginRight: 8}}>
          <span style={styles.span}>
          已加入: {item.activity_join_count}
          </span>
        </div>

        <IconButton
          iconClassName="icon-open_in_new"
          iconStyle={{color: grey500}}
          style={{marginRight: 0}}
          tooltip="详细"
          tooltipPosition="top-left"
          onTouchTap={this.props.pushTo.bind(this, '/activity/show/' + item.id)}
        />
      </CardActions>
    );

    let content = (
      <div style={styles.content}>
        <CardText style={{flex: 1}}> 
          <p>
            <FontIcon style={{fontSize: 14}} className="icon-today" />
            {moment(item.start_time).format('ll ah:mm')}
            {item.number_of_people ? 
              <span>{' 限'+item.number_of_people+'人'}</span>
            : ''}              
          </p>
          
          {item.end_time ? <p>
            <FontIcon style={{fontSize: 14}} className="icon-remove" />
            {moment(item.end_time).format('ll ah:mm')}
          </p> : ''}

          {item.address ? <p>
            <FontIcon style={{fontSize: 14}} className="icon-room" />
            {item.address}
          </p> : ''}

          <div style={{
            lineHeight: 1.428,
          }}>
            {item.details}
          </div>
        </CardText>

        {action}
      </div>
    );

  	return (
      <div className="col-md-4 col-xs-12 card-cell">
        <Card>
          {find ? findHeader : header}
          
          <CardTitle 
            style={{cursor: 'pointer'}} 
            title={item.title} 
            onClick={this.props.pushTo.bind(this, '/activity/show/' + item.id)}
          />

          {content}
        </Card>
      </div>
    );
  }
}

const styles = {
  text: {
    lineHeight: 1.428,
    paddingTop: 0
  },
  action: {
    display: 'flex',
    justifyContent: 'space-between'
  },
  span: {
    display: 'table-cell',
    verticalAlign: 'middle',
    height: 48,
    fontSize: 12,
    color: grey500
  }
};
